<template>
  <div class="pie_chart" :id="idName">环形图</div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, toRefs, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const props = defineProps({
  idName: {
    type: String,
    default: "barChart",
  },
  title: {
		type: String,
		default: "XXX饼状图"
	},
	list: {
		type: Array,
		required: true
	},
	type: {
		type: String,
		default: "参数"
	},
});
let { idName, title, list, type } = toRefs(props);
let option=ref({
	title: {
		// top:0,
		// padding:0,
		text: "",
		left: "center",
		// textStyle:{
		// 	fontSize: 14,    //字体大小
		// }
	},
	tooltip: {
		trigger: "item",
		formatter: '{a} <br/>{b} : {c} ({d}%)'
	},
	legend: {
		orient: "vertical",
		left: "left",
	},
	series: [ 
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      data: [],
    }
  ],
})
let init_chart = () => {
	let optionObj = option.value;
	let typeObj = type.value;
	let titleObj = title.value;
	if (titleObj) {
		optionObj.title.text = titleObj;
	}

	// 分类名
	if (typeObj) {
		optionObj.series[0].name = typeObj;
	}
	// 参数
	optionObj.series[0].data = list.value;
	let myChart = echarts.init(document.getElementById(idName.value));
	myChart.setOption(optionObj);
};
watch(list, (newValue, oldValue) => {
  if (newValue) {
    init_chart();
  }
});
onMounted(() => {
	setTimeout(()=>{
	 init_chart();
	},200)

});
</script>

